<script setup lang="ts">
import { ref, defineProps, watch, onMounted, onBeforeUnmount, reactive } from 'vue'
import * as echarts from 'echarts'
import { ECharts } from 'echarts'
import { series, tooltip, windowResize, xAxis, yAxis } from '@/views/common'
import { fontSizeRem } from '@/utils/utils'

const props = defineProps({
  randomColor: {
    type: Boolean,
    default: false,
  },
  slider: {
    type: Boolean,
    default: false,
  },
  unit: {
    type: String,
    default: '个',
  },
  type: {
    type: String,
    default: '',
    required: true,
  },
  lineX: {
    type: Array as () => string[],
    default: () => [],
    required: true,
  },
  lineY: {
    type: Array as () => number[],
    default: () => [],
    required: true,
  },
  description: {
    type: String,
    default: '',
    required: true,
  },
  color: {
    type: String,
    default: '',
    required: true,
  },
  changeChat: {
    type: Function,
  },
  splitLine: {
    type: Boolean,
    default: false,
  },
  rotate: {
    type: String,
    default: '30',
  },
})
const data = reactive({
  clientHeight: 0,
})
const chatEl = ref<HTMLDivElement>()
let chat: ECharts
let colorList = [
  '#C1232B',
  '#B5C334',
  '#FCCE10',
  '#E87C25',
  '#27727B',
  '#FE8463',
  '#9BCA63',
  '#FAD860',
  '#F3A43B',
  '#60C0DD',
  '#D7504B',
  '#C6E579',
  '#F4E001',
  '#F0805A',
  '#26C0C0',
]
const initChat = () => {
  if (chat) chat.dispose()
  chat = echarts.init(chatEl.value)
  props.changeChat && props.changeChat(chat, props.type)
  chat.setOption({
    tooltip,
    grid: {
      top: '50',
      left: '0',
      right: '2',
      bottom: '10',
      containLabel: true,
    },
    xAxis: {
      axisPointer: {
        type: 'shadow',
      },
      ...xAxis(props.lineX, props.splitLine, props.splitLine ? props.lineX?.length : undefined),
      axisLine: {
        show: false,
        lineStyle: { color: '#283460' }
      },
      axisLabel: {
        // interval: '0',
        rotate: props.rotate,
        formatter: function (value) {
          // 如果标签长度大于10，截断并添加省略号
          return value.length > 10 ? value.slice(0, 10) + '...' : value;
        },
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(131,101,101,0.2)',
          type: 'dashed',
        },
      },
    },
    yAxis: {
      ...yAxis(true),
      axisLine: {
        show: false,
        lineStyle: { color: '#bfc0c5' },
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(131,101,101,0.2)',
          type: 'dashed',
        },
      },
    },
    series: {
      barWidth: fontSizeRem(0.3),
      ...series(props.lineY, '', props.description, props.unit),
      label: {
        show: true,
        position: 'top',
        color: '#fff',
      },
      itemStyle: {
        // color: props.color,
        color: function (params) {
          //展示正值的柱子，负数设为透明
          // let colorArr = params.value > 0 ? [ props.color, '#08103B'] : ['#08103B', props.color]
          let colorArr =
            params.value > 0
              ? [
                  props.randomColor ? colorList[Math.floor(Math.random() * 15)] : props.color,
                  '#08103B',
                ]
              : [
                  '#08103B',
                  props.randomColor ? colorList[Math.floor(Math.random() * 15)] : props.color,
                ]
          return new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: colorArr[0], // 0% 处的颜色
              },
              {
                offset: 1,
                color: colorArr[1], // 100% 处的颜色
              },
            ],
            false
          )
        },
        barBorderRadius: [30, 30, 0, 0],
      },
      // label: {
      //   normal: {
      //     show: true,
      //     fontSize: 18,
      //     fontWeight: 'bold',
      //     color: '#333',
      //     position: 'top',
      //   },
      // },
    },
    dataZoom: {
      show: props.slider,
      type: 'slider',
      // bottom:'-10'
    },
  })
}
watch([() => props.lineX, () => props.lineY], () => {
  initChat()
})
onMounted(() => {
  initChat()
  setTimeout(() => {
    window.addEventListener('resize', initChat)
  }, 100)
})
onBeforeUnmount(() => {
  // 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿
  window.removeEventListener('resize', initChat)
})
</script>

<template>
  <div ref="chatEl" class="chat"></div>
</template>

<style scoped lang="scss">
@import '@/assets/css/theme';
@import '../common';
// .chat{
//   padding-bottom: 1vh;
// }
</style>
